<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Socket.IO Client Example</title>
  <script type="module">
    import { io } from "https://cdn.socket.io/4.4.1/socket.io.esm.min.js";
    let globalThis = {};
    const socket = io("http://localhost:17521", {
      transports: ["websocket"]
      /*,
      auth: {
        token: "vue-plugin-hiprint",
      }*/
    });

    socket.on("connect", () => {
      globalThis.connect = true;
      // TODO: Do something for your project
    });
    socket.on("clientInfo", (clientInfo) => {
      globalThis.clientInfo = clientInfo;
      console.log(clientInfo);
    });

    socket.on("printerList", (printerList) => {
      globalThis.printerList = printerList;
      console.log(printerList);
    });

    socket.on("success", (res) => {
      console.log("success", res)
      // TODO: Do something for your project
    })

    socket.on("error", (res) => {
      console.log("error", res)
      // TODO: Do something for your project
    })

    window.sendNews =  function () {
      if (globalThis.connect) {
        let html = "<h1>Hello World!</h1>";
        socket.emit("news", {silent:true, html: html});
      } else {
        alert("未连接客户端！");
        window.open("hiprint://");
      }
    }
  </script>
</head>
<body>
<h1>Socket.IO Client Example</h1>
<button onclick="sendNews()">Send News</button>
</body>
</html>
